

<!-- 选择发票 -->
<template>
	<view>
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="选择发票" colorTheme="black">
			</navHeader>
		</view>
		
		
		<!-- 发票类型 -->
		<view class="invoiceType-Container">
			<view class="invoiceTypeTitle">
				发票类型
			</view>
			
			<view class="invoiceTypeList">
				<view v-for="(item, index) in invoiceTypeList" @click="changeInvoiceType(item.typeId, index)" class="invoiceTypeItem" :class="{active: cidType == item.typeId, disabled: (invoiceTypes[index] != 10)}">
					{{item.typeName}}
				</view>
			</view>
		</view>
		
		
		<!-- 发票内容 -->
		<view class="invoiceType-Container" style="padding-top: 0;">
			<view class="invoiceTypeTitle">
				发票内容
			</view>
			
			<view class="invoiceTypeList">
				<view @click="changeInvoiceText(1)" class="invoiceTypeItem" :class="{active: cidText == 1}">
					商品明细
				</view>
				<view @click="changeInvoiceText(2)" class="invoiceTypeItem" :class="{active: cidText == 2}">
					商品类别
				</view>
			</view>
		</view>
		
		
		<!-- 发票列表 -->
		<view class="invoiceType-Container" style="padding-top: 0; padding-bottom: 0;">
			<view class="invoiceTypeTitle">
				发票抬头
			</view>
		</view>
		<view v-if="selectInvoiceList && selectInvoiceList.length">
			<view @click="getInvoiceList()" class="oneInvoice" v-for="(item, index) in selectInvoiceList" :key="item.cfId">
				<view class="left">
					<view class="ciTitle ellipsis1">
						{{item.ciTitle}}
					</view>
					<view v-if="item.ciType == 1" class="ciType">
						<image class="ciType1" :src="icon.ciType1"></image>
						<view class="typeName">
							公司
						</view>
					</view>
					<view v-if="item.ciType == 2" class="ciType">
						<image class="ciType2" :src="icon.ciType2"></image>
						<view class="typeName">
							个人或其他
						</view>
					</view>
				</view>
				<view class="right">
					<image class="selectBtn" :src="icon.selectBtn"></image>
				</view>
			</view>
		</view>
		<view v-else>
			<view @click="gotoAddInvoicePage()" class="oneInvoice">
				<view class="left" style="justify-content: center;">
					<view class="ciTitle ellipsis1">
						新增发票抬头
					</view>
				</view>
				<view class="right">
					<image class="selectBtn" :src="icon.selectBtn"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 操作 -->
		<view @click="sureInvoiceHander()" class="sureInvoiceBtn">
			确定
		</view>
		<view @click="cancelInvoiceHander()" class="cancelInvoiceBtn">
			暂不开票
		</view>
		<view style="height: 40upx;"></view>
		
		<!-- 发票管理 -->
		<view v-if="invoiceManagerFlag" class="modalBg-Container">
			<view class="modalContent-Container">
				<view class="modalTitle">
					选择发票
				</view>
				<scroll-view scroll-y="true" class="scrollViewInvoice-Container">
					<view @click="selectCurrentInvoice(index)" class="oneInvoice" v-for="(item, index) in invoiceList" :key="item.cfId">
						<view class="left">
							<view class="ciTitle ellipsis1">
								{{item.ciTitle}}
							</view>
							<view v-if="item.ciType == 1" class="ciType">
								<image class="ciType1" :src="icon.ciType1"></image>
								<view class="typeName">
									公司
								</view>
							</view>
							<view v-if="item.ciType == 2" class="ciType">
								<image class="ciType2" :src="icon.ciType2"></image>
								<view class="typeName">
									个人或其他
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="addInvoiceBtn-Container">
					<view @click="gotoAddInvoicePage()" class="addInvoiceBtn">
						+新增发票抬头
					</view>
				</view>
				<image @click="closeInvoiceHandler()" class="closeBtn" :src="icon.closeBtn"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader
		},
		computed: {
			...mapState(['imgSite', 'hasLogin'])
		},
		data() {
			return {
				icon: {
					closeBtn: "/static/images/user/invoice/close-btn.png",
					selectBtn: "/static/images/user/invoice/moreSelect.png",
					ciType1: "/static/images/user/invoice/ciType1.png",
					ciType2: "/static/images/user/invoice/ciType2.png",
				},
				
				//发票管理
				invoiceList: [],
				selectInvoiceList: [],
				invoiceManagerFlag: false,
				
				//开票信息
				shopIndex: "",
				cidInvoiceId: "",
				cidType: "1", //开票类型(1,普通纸质发票 2,普通电子发票 3,增值税纸质发票 4,增值税电子发票)
				cidText: "1", //发票内容
				
				//可开发票类型
				invoiceTypes: [],
				invoiceTypeList: [{
					typeId: 1,
					typeName: "普通纸质发票"
				},{
					typeId: 2,
					typeName: "普通电子发票"
				},{
					typeId: 3,
					typeName: "增值税纸质发票"
				},{
					typeId: 4,
					typeName: "增值税电子发票"
				}]
			}
		},
		onLoad(options) {
			this.shopIndex = options.shopIndex || "";
			
			if(options.invoiceType) {
				this.invoiceTypes = JSON.parse(options.invoiceType);
			}else {
				
				//平台发票类型
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/customerInvoiceApi/invoiceTypes',
					method: 'POST',
					success: function(res) {
						that.invoiceTypes = [
							res.data.response.invoiceOrdPaperFlag,
							res.data.response.invoiceOrdElectronicFlag,
							res.data.response.invoiceVatPaperFlag,
							res.data.response.invoiceVatElectronicFlag
						];
					},
				});
			}
			
			//默认发票类型
			for(var i = 0; i < this.invoiceTypes.length; i++) {
				if(this.invoiceTypes[i] == 10) {
					this.cidType = (i + 1);
					break;
				}
			}
		},
		onShow: function() {
			this.invoiceManager_fun();
			
			if(this.invoiceManagerFlag) {
				this.invoiceManager_fun();
			}
		},
		methods: {
			
			//切换发票类型
			changeInvoiceType(cidType, index) {
				if(this.invoiceTypes[index] != 10) {
					return ;
				}
				this.cidType = cidType;
			},
			
			
			//切换发票内容
			changeInvoiceText(text) {
				this.cidText = text;
			},
			
			
			//选择发票
			selectCurrentInvoice(index) {
				this.selectInvoiceList[0] = this.invoiceList[index];
				this.invoiceManagerFlag = false;
			},
			getInvoiceList() {
				this.invoiceManagerFlag = true;
			},
			closeInvoiceHandler() {
				this.invoiceManagerFlag = false;
			},
			
			//发票管理
			invoiceManager_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/customerInvoiceApi/getInvoiceList',
					method: 'POST',
					data: {
						pageNum: 1,
						pageSize: 10000
					},
					success: function(res) {
						that.invoiceList = res.data.response.results;
						if(that.invoiceList.length) {
							that.selectInvoiceList = [];
							that.selectInvoiceList.push(that.invoiceList[0]);
						}
					}
				});
			},
			
			
			//新增发票
			gotoAddInvoicePage() {
				uni.navigateTo({
					url: "/pagesUser/invoice/addEdit"
				});
			},
			
			
			//确定发票
			sureInvoiceHander() {
				if(this.selectInvoiceList.length) {
					
					var invoiceInfo = this.selectInvoiceList[0];
					invoiceInfo["cidType"] = this.cidType;
					invoiceInfo["cidText"] = {
						"1": "商品明细", 
						"2": "商品类别", 
					}[this.cidText];
					invoiceInfo["shopIndex"] = this.shopIndex;
					
					var pages = getCurrentPages(); // 获取页面栈
					var prevPage = pages[pages.length - 2]; // 上一个页面
					prevPage.$vm.selectInvoiceHandler(invoiceInfo);
					uni.navigateBack({
					});
				}else {
					this.$api.msg("请选择发票抬头!");
				}
			},
			
			
			//暂不开票
			cancelInvoiceHander() {
				var pages = getCurrentPages(); // 获取页面栈
				var prevPage = pages[pages.length - 2]; // 上一个页面
				prevPage.$vm.selectInvoiceHandler(null, this.shopIndex);
				uni.navigateBack({
				});
			}
		}
	};
</script>

<style lang="less">
	page{
		background: #FFFFFF;
	}
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	
	//发票类型
	.invoiceType-Container {
		padding: 50rpx 30rpx 28rpx 30rpx;
		
		.invoiceTypeTitle {
			margin-bottom: 28rpx;
			font-size: 28rpx;
			color: #333333;
		}	
		
		.invoiceTypeList {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			
			.invoiceTypeItem {
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				border-radius:33rpx;
				background-color: #EEEEEE;
				
				&.active {
					color: #FE5E49;
					border:1px solid #FE5E49;
					background:#FFEDED;
				}
				
				&.disabled {
					color: #ADADAD;
				}
			}
		}
	}
	
	
	//发票列表
	.oneInvoice {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding: 0 32rpx 0 35rpx;
		width:690rpx;
		height:152rpx;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(238,238,238,1);
		box-shadow:0px 2rpx 10rpx 0px rgba(123,123,123,0.1);
		border-radius:16rpx;
		
		.left {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: space-between;
			padding: 30rpx 0;
			
			.ciTitle {
				max-width: 520rpx;
				font-size:28rpx;
				font-family:PingFang SC;
				// font-weight:bold;
				color:rgba(51,51,51,1);
			}
			
			.ciType {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
				.ciType1 {
					width: 24rpx;
					height: 24rpx;
				}
				.ciType2 {
					width: 26rpx;
					height: 22rpx;
				}
				.typeName {
					margin-left: 8rpx;
					font-size:24rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:#666666;
				}
			}
		}
		
		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			
			.selectBtn {
				width: 16rpx;
				height: 28rpx;
			}
		}
	}
	
	
	//操作
	.sureInvoiceBtn {
		margin: 0 auto;
		margin-top: 240rpx;
		width:600rpx;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 34rpx;
		color: #FFFFFF;
		background: #FE5E49;
		border-radius:45rpx;
	}
	.cancelInvoiceBtn {
		margin: 0 auto;
		margin-top: 56rpx;
		width:600rpx;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 34rpx;
		color: #FE5E49;
		background:rgba(255,255,255,1);
		border:1px solid #FE5E49;
		border-radius:45rpx;
	}
	
	
	/* 发票管理 */
	.modalBg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background:rgba(0,0,0,0.7);
		
		.modalContent-Container {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 900rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx 16rpx 0px 0px;
			
			.modalTitle {
				width: 100%;
				height: 130rpx;
				line-height: 130rpx;
				text-align: center;
				font-size:30rpx;
				font-family:PingFang SC;
				color:rgba(52,52,52,1);
			}
			
			.scrollViewInvoice-Container {
				margin: 0 auto;
				width:690rpx;
				height:760rpx;
				
				.oneInvoice {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 auto;
					margin-bottom: 20rpx;
					padding: 0 32rpx 0 35rpx;
					width:690rpx;
					height:152rpx;
					background:rgba(255,255,255,1);
					border:1rpx solid rgba(238,238,238,1);
					box-shadow:0px 2rpx 10rpx 0px rgba(123,123,123,0.1);
					border-radius:16rpx;
					
					.left {
						display: flex;
						flex-direction: column;
						height: 100%;
						justify-content: space-between;
						padding: 30rpx 0;
						
						.ciTitle {
							max-width: 520rpx;
							font-size:28rpx;
							font-family:PingFang SC;
							// font-weight:bold;
							color:rgba(51,51,51,1);
						}
						
						.ciType {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							
							.ciType1 {
								width: 24rpx;
								height: 24rpx;
							}
							.ciType2 {
								width: 26rpx;
								height: 22rpx;
							}
							.typeName {
								margin-left: 8rpx;
								font-size:24rpx;
								font-family:PingFang SC;
								// font-weight:500;
								color:#666666;
							}
						}
					}
					
					.right {
						display: flex;
						align-items: center;
						justify-content: center;
						width:80rpx;
						height:80rpx;
						background:rgba(255,255,255,1);
						border:1rpx solid rgba(245,245,245,1);
						box-shadow:0px 0px 10rpx 0px rgba(53,53,53,0.05);
						border-radius:40rpx;
						
						.editBtn {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
			
			.addInvoiceBtn-Container {
				position: absolute;
				bottom: 100rpx;
				left: 0;
				width: 100%;
				height: 90rpx;
				
				.addInvoiceBtn {
					margin: 0 auto;
					width:600rpx;
					height:90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size:34rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:rgba(255,255,255,1);
					background: #FE5E49;
					border-radius:45rpx;
				}
			}
			
			.closeBtn {
				position: absolute;
				top: 26rpx;
				right: 26rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>



